<template>
	<div class="employee-list-container">
		<div class="header-actions">
			<el-input v-model="searchQuery" placeholder="搜索员工姓名或部门" prefix-icon="search"
				style="width: 300px; margin-right: 10px;" />
			<el-button type="primary" :icon="Plus" @click="$router.push({ name: 'EmployeeAdd' })">
				添加员工
			</el-button>
		</div>

		<EmployeeTable
			v-loading="loading"
			:columns="columns"
			:data="employees"
			:total="total"
			:current-page="currentPage"
			:page-size="pageSize"
			@edit="handleEdit"
			@delete="deleteEmployee"
			@page-change="handlePageChange"
		/>
	</div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import EmployeeTable from '@/components/EmployeeTable.vue'
import employeeApi from '@/utils/api/employee'
import request from '@/utils/request'
import { ElMessage, ElMessageBox } from 'element-plus'

const employees = ref([])
const searchQuery = ref('')
const loading = ref(false)
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 表格列定义
const columns = [
	{ prop: 'id', label: 'ID', width: '80' },
	{ prop: 'name', label: '姓名', width: '120' },
	{ prop: 'sex', label: '性别', width: '80' },
	{ prop: 'no', label: '工号', width: '120' },
	{ prop: 'age', label: '年龄', width: '80' },
	{ prop: 'description', label: '个人介绍', width: '200' },
	{ prop: 'departmentId', label: '部门', width: '120' }
]

// 模拟员工数据

onMounted(() => {
	fetchEmployees()
})

const fetchEmployees = async () => {
	loading.value = true
	try {
		// 实际项目中替换为带分页参数的API调用
		let res = await employeeApi.getEmployeeList({
			pageNum: currentPage.value,
			pageSize: pageSize.value
		})
		console.log(res.data.list,'2222');
		employees.value = res.data.list
		total.value = res.data.total
		ElMessage.success('员工数据加载成功')
	} catch (error) {
		console.error('Error fetching employees:', error)
		ElMessage.error('员工数据加载失败')
	} finally {
		loading.value = false
	}
}

const handleEdit = (id) => {
console.log(id,'我是编辑按钮');
}

const previousPagination = ref({ currentPage: 1, pageSize: 10 })

const handlePageChange = (pagination) => {
  // 只有当分页参数实际变化时才执行查询
  if (pagination.currentPage !== previousPagination.value.currentPage || 
      pagination.pageSize !== previousPagination.value.pageSize) {
    currentPage.value = pagination.currentPage
    pageSize.value = pagination.pageSize
    previousPagination.value = { ...pagination }
    fetchEmployees()
  }
}

const deleteEmployee = async (id) => {
	try {
		console.log(id,'我进来了');
		let params = { 
			ids:id
		 }
		await employeeApi.deleteEmployee(params)
    fetchEmployees()

	} catch (error) {

	}
}
</script>


<style scoped>
.header-actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
}
</style>